import { useIntersectionObserver } from '@vueuse/core'

export default {
  install (Vue) {
    // 全局自定义指令
    Vue.directive('img', {
      // 当节点插入到页面中了
      inserted (el, binding) {
        // 只要给图片设置src，它就会义无反顾的去加载图片，无论图片现在是否能看到
        // 我们应该等el节点出现在可视区域（能看到了）
        // if (el出现在了可视区域) {
        //   el.src = binding.value
        // }
        // el.src = binding.value

        // el.onerror = function () {
        //   // 给他设置一个默认图片
        //   el.src =
        //     'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
        // }

        // function lazyLoad () {
        //   console.log('加载')
        //   const top = el.getBoundingClientRect().top
        //   const src = binding.value
        //   if (top <= window.innerHeight) {
        //     el.setAttribute('src', src)
        //   }
        // }
        // function throttle (fn) {
        //   let timer = null
        //   return function () {
        //     if (timer) return
        //     timer = setTimeout(() => {
        //       fn.apply(this, arguments)
        //       timer = null
        //     }, 500)
        //   }
        // }
        // lazyLoad()
        // window.addEventListener('scroll', throttle(lazyLoad))

        // 保存旧的src，方便后期渲染时候赋值src真实路径
        // const oldSrc = binding.value
        // // 将渲染的src赋为空，则不会渲染图片出来
        // el.src = ''
        // // 调用方法得到该elDOM元素是否处于可视区域
        // const observer = new IntersectionObserver(([{ isIntersecting }]) => {
        //   if (isIntersecting) {
        //     // 回调是否处于可视区域，true or false
        //     // 如果处于可视区域额，将最开始保存的真实路径赋予DOM元素渲染
        //     el.src = oldSrc
        //     // 只需要监听一次即可，第二次滑动到可视区域时候不在监听
        //     observer.unobserve(el)
        //   }
        // })
        // // 调用方法
        // observer.observe(el)

        // // 报错
        // el.onerror = () => {
        //   el.src =
        //     'https://img2.baidu.com/it/u=2596089533,3427808679&fm=253&fmt=auto&app=138&f=JPEG?w=567&h=470'
        // }

        /**
         * 参数1：el是监听的节点，我们这里就是 img 标签
         * 参数2：滚动页面时候，执行的函数，如果 isIntersecting 它的值为true则代表，节点出现在可视区域内了
         * 如果为false则代表滚出去了
         */
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 此刻再去发送图片的请求，这才是真正懒加载
            el.src = binding.value

            // 停止对el的监听
            stop()
          }
        })

        el.onerror = function () {
          // 给他设置一个默认图片
          el.src =
            'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
        }
      }
    })
  }
}
